import React, { memo, useRef, useEffect } from 'react';
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

import './style.less';

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

export default memo(function MyRoseEchart(props) {
  const chartRef = useRef();
  useEffect(() => {
    const myChart = echarts.init(chartRef.current);
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
        },
      ],
    };
    myChart.setOption(option);
  }, []);

  return <div className="my-echart" ref={chartRef}></div>;
});
